{% if config.TEST_MODE %}
<div class="test-mode-warning">Running in test mode: Data will not be saved.</div>
{% endif %}

<div class="menu-bar">
    <div class="menu-bar-left">
        <a id="storymap_list" class="btn" href="{{ url_for('select') }}"><i class="icon-chevron-left"></i> My Maps</a>
        <button id="storymap_options" class="btn" href="#opt_modal" data-toggle="modal"><i class="icon-cog"></i> Options</button>
        <button id="storymap_save" class="btn disabled"><i class="icon-save"></i> Save</button>
        <button id="storymap_publish" class="btn hide"><i class="icon-repeat"></i> Publish Changes</button>
    </div>
    <div class="menu-bar-right">
        <div class="btn-group">
            <button class="btn dropdown-toggle" data-toggle="dropdown">Help <span class="caret"></span></button>
            <ul class="dropdown-menu pull-right">
                <li><a href="{{ url_for('advanced') }}" target="_blank">Advanced</a></li>
                <li><a href="https://knightlab.zendesk.com/forums/22615078-StoryMapJS" target="_blank">Support Forum</a></li>
                <li><a href="https://github.com/NUKnightLab/StoryMapJS" target="_blank">GitHub Repository</a></li>
            </ul>
        </div>
        <button id="storymap_share" class="btn" href="#share_modal" data-toggle="modal"><i class="icon-share"></i> Share</button>
    </div>
</div>

<div class="slides-section">
    <div class="slide">
        <div class="slide-icon"></div>
        <div class="slide-title"></div>
    </div>
    <div class="slides-container">
        <ol id="slides">
        </ol>
	    <div class="slides-add" id="storymap_add_slide" >
			<div class="slide-icon"></div>
			<div class="slide-title">Add Slide</div>
		</div>
    </div>
</div>

<div class="tabs-section">
    <ul class="nav nav-tabs" id="tabs">
        <li class="active"><a href="#edit" data-toggle="tab">Edit</a></li>
        <li><a href="#preview" data-toggle="tab">Preview</a></li>
    </ul>
    <div class="tab-content">
        <div class="tab-pane active" id="edit">
            <div id="map-div">
                <div id="map" class="vco-map"></div>
                <svg id="map_overlay" xmlns="http://www.w3.org/2000/svg" version="1.1">
                    <polyline points="" />
                </svg>
                <div id="map_info" class="ui-note">This is your title slide.  The title slide shows all points from your other slides.</div>
                <input title="Search for a location or enter coordinates like this: lat:42.0507 lon:-87.6739" id="map_search_input" type="text" placeholder="Search for a location or enter coordinates like this: lat:42.0507 lon:-87.6739">
           </div>

            <div class="data-left">
                <div class="data-section data-frame">
                    <label style='display: block'>Media</label>
					<!--
                    <div class="data-media-icons">
                        <span class="vco-icon-dailymotion"></span>
                        <span class="vco-icon-flickr"></span>
                        <span class="vco-icon-image"></span>
                        <span class="vco-icon-instagram"></span>
                        <span class="vco-icon-soundcloud"></span>
                        <span class="vco-icon-storify"></span>
                        <span class="vco-icon-twitter"></span>
                        <span class="vco-icon-vimeo"></span>
                        <span class="vco-icon-vine"></span>
                        <span class="vco-icon-youtube-logo"></span>
                        <span class="vco-icon-web"></span>
                        <span class="vco-icon-wikipedia"></span>
                    </div>
					-->
                    <div class="data-media-preview">
                    </div>
                    <div class="data-media-details">
                      <input id="url" type="text" placeholder="URL to your media">

                      <div class="data-media-upload">
                      or  <button id="upload_media" class="btn" title="Upload image" href="#upload_modal" data-toggle="modal"><i class="icon-cloud-upload icon-large"></i> Upload an Image </button>

                      </div>
                        
                      <input id="credit" type="text" placeholder="Credit">
                      <textarea id="caption" placeholder="Caption" rows="3"></textarea>
                        <div class="data-media-upload"><em>Accepts <a href="#html_modal"  data-toggle="modal">HTML</a></em></div>
                    </div>
                </div>
            </div>

            <div class="data-right">
                <div class="data-section">
                    <input id="headline" type="text" placeholder="Headline" class="editor-headline">
                    <textarea id="text" rows="5"></textarea>
                    <button id="marker_options" class="btn" href="#marker_opt_modal" data-toggle="modal"><i class="icon-map-marker icon-medium"></i> Marker Options</button>
                    <button id="background_options" class="btn" href="#background_opt_modal" data-toggle="modal"><i class="icon-cog icon-medium"></i> Background Options</button>
               </div>
            </div>

        </div>
        <div class="tab-pane" id="preview">
            <div id="preview_embed"></div>
        </div>
    </div>
</div>

<!-- START BOOTSTRAP-WYSIHTML5 BUTTON TEMPLATES -->
<ul id="wysihtml5_emphasis" style="display: none;">
    <li>
    <div class="btn-group">
    <a class="btn btn-small" data-wysihtml5-command="bold" title="Bold" tabindex="-1" href="javascript:;" unselectable="on"><i class="icon-bold"></i></a>
    <a class="btn btn-small" data-wysihtml5-command="italic" title="Italic" tabindex="-1" href="javascript:;" unselectable="on"><i class="icon-italic"></i></a>
    </div>
    </li>
</ul>
<ul id="wysihtml5_link" style="display: none;">
<li>
    <div class="bootstrap-wysihtml5-insert-link-modal modal hide fade">
    <div class="modal-body">
    <p><input value="" class="bootstrap-wysihtml5-insert-link-url input-xlarge"></p>
    <label class="checkbox"> <input type="checkbox" class="bootstrap-wysihtml5-insert-link-target" checked="">Open link in new window</label>
    </div>
    <div class="modal-footer">
    <a href="#" class="btn" data-dismiss="modal">Cancel</a><a href="#" class="btn btn-primary" data-dismiss="modal">Insert link</a>
    </div>
    </div>
    <a class="btn btn-small" data-wysihtml5-command="createLink" title="Insert link" tabindex="-1" href="javascript:;" unselectable="on"><i class="icon-link"></i></a>
</li>
</ul>
<ul id="wysihtml5_html" style="display: none;">
<li>
    <div class="btn-group">
    <a class="btn btn-small" data-wysihtml5-action="change_view" title="Edit HTML" tabindex="-1" href="javascript:;" unselectable="on">&lt;/&gt;</a>
    </div>
</li>
</ul>
<!-- END BOOTSTRAP-WYSIHTML5 BUTTON TEMPLATES -->
